<template>
  <div class="post">
    <!-- 形态1：左右结构-1张图 -->
    <div class="type1">
      <div class="left">
        <h3 class="title">{{ post.title }}</h3>
        <p class="desc">
          <span>{{ post.user.nickname }}</span>
          <span>{{ post.comment_length }}</span>
        </p>
      </div>
      <van-image fit="cover " class="right" :src="post.cover[0].url" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // post的类型要求是对象且必须传递
    post: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style lang="less" scoped>
.type1 {
  display: flex;
  padding: 20px;
  .left {
    flex: 1;
    background-color: rgb(92, 73, 76);
    .title {
      font-size: 24px;
    }
    .desc {
      color: #ccc;
      span {
        font-size: 20px;
        margin-right: 19px;
      }
    }
  }
  .right {
    width: 120px;
    height: 75px;
  }
}
</style>